<template>
  <div class="container">
    <el-input
        type="textarea"
        class="textarea left"
        :row="row"
        v-model="leftText"
    />
    <el-input
        type="textarea"
        class="textarea right"
        :row="row"
        v-model="rightText"
    />
  </div>
  <el-footer>
    <el-form :inline="true">
      <el-form-item label="分隔符">
        <el-input v-model="separator" placeholder="分隔符"/>
      </el-form-item>
      <el-form-item>
        <el-button @click="columnToForeach" type="primary">
          转换
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="copy" type="primary">
          复制
        </el-button>
      </el-form-item>
    </el-form>
  </el-footer>
</template>
<script>

import {copy2Clipboard, getForeachStr} from "../../utils/util.js";

export default {
  name: 'ColToForeach',
  props: {
    inForeachPrefix: String,
    outForeachPrefix: String,
    suffix: String
  },
  data() {
    return {
      row: 10,
      leftText: '',
      rightText: '',
      separator: ',',
    }
  },
  methods: {
    columnToForeach() {
      this.rightText = getForeachStr(this)
    },
    copy() {
      copy2Clipboard(this)
    }
  }
}
</script>
<style></style>
